<template>
    <div class="exam-wrap">
        <div class="content bgc-ff">
            <!-- 考点练习主体部分 -->
            <div class="exam-page-wrap page-wrap">
                <!-- 头部 -->
                <section class="exmpnt-title bgc-info c-fff">
                    <span class="iconfont icon-right text-left" @click="jumpExamIndex"></span>
                    <span class="font-29 text-center">{{exmpntOrTitle}}</span>
                    <span></span>
                </section>
                <!-- 试题主体部分 -->
                <section v-show="!haveError" class="exmpnt-main">
                    <!-- 题目序号标题渲染 -->
				    <!-- {{index+1}}#{{item && item.title}} -->
                    <div class="exmpnt-question">
                        <div class="exmpnt-question-title font-30 c-777">{{questionIndex+1}}.# {{questionItem && questionItem.title}}</div>
                        <ul class="font-29 c-35">
                            <li v-for="(item,index) in questionOptions" :key="index">
                                <input type="checkbox" @change="answerClk" :value="item.index" v-model="checkboxArr">
                                <span> {{item.index}}. {{item.value}}</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 上下题按钮 -->
                    <div class="exmpnt-updownbtn-wrap">
                        <button class="btn" @click="upDownBtnClk('-')">上一题</button>
                        <div class="font-30 c-777">{{questionIndex+1}}/{{questionsData.length}}</div>
                        <button class="btn" v-if="questionIndex!=questionsData.length - 1" @click="upDownBtnClk('+')">下一题</button>
                        <button class="btn" v-else @click="submitFn('+')">交卷</button>
                    </div>
                </section>
                <!-- 上拉题号按钮遮罩层 -->
                <div class="btn-up" @click="isShowZzc=true" v-show="!isShowZzc">
                    <span class="iconfont icon-up-fill"></span>
                </div>
                <!-- <transition name="exmpnt-index-btn"> -->
                    <section class="exmpnt-index-btn" v-show="isShowZzc">
                        <span @click="isShowZzc=false" class="iconfont icon-up21"></span>
                        <div>
                            <button v-for="(item,index) in questionsData" :key="index"
                             class="btn" :class="numBtnClass(item,index)"
                            @click="upDownBtnClk(index)">
                                {{ index+1 | fillZero }}
                            </button>
                        </div>
                    </section>
                <!-- </transition> -->
                <!-- 提示弹出框 -->
                <div class="alertZzc" v-show="isAlertZzc">
                    <div class="alertZzc-skin">
                        <div v-if="haveError" class="alertZzc-content">您目前没有错题</div>
                        <div v-else class="alertZzc-content">本次{{exmpntOrTitle}}共得
                            <span>{{rightAns}}</span>
                        分!</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
// import "@/css/exam/examPublic.css";
// import "@/css/exam/examPoint.css";
// import "@/css/exam/icon/iconfont.css";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      checkboxArr: [],
      isShowZzc: false,
      isAlertZzc: false,
      haveError: false
    };
  },
  mounted() {
    this.getQuestions(this.$route.params.place);
    console.log(this.questionsData);
    // console.log(this.$route.params.place)
    if (this.$route.params.place == "error" && this.questionsData.length == 0) {
      console.log(333);
      this.haveError = true;
      this.alertZzcFn();
    } else {
      this.haveError = false;
    }
  },
  methods: {
    ...mapActions("exam", ["getQuestions"]),
    ...mapMutations("exam", ["SET_QUESINDEX", "SET_ANSWER", "SET_RIGHT"]),
    // 跳回考试主页
    jumpExamIndex() {
      this.$router.push("/exam");
    },
    upDownBtnClk(upDown) {
      this.SET_QUESINDEX(upDown);
      //   console.log(this.questionsData[this.questionIndex].ans)
      if (this.questionsData[this.questionIndex].ans) {
        this.checkboxArr = this.questionsData[this.questionIndex].ans;
      } else {
        this.checkboxArr = [];
      }
    },
    answerClk() {
      this.SET_ANSWER(this.checkboxArr);
    },
    numBtnClass(item, index) {
      if (index == this.questionIndex) {
        return "bgc-info";
      } else {
        if (item.ans) {
          let r = JSON.stringify(item.ans);
          if (item.answers == r) {
            return "bgc-success";
          } else {
            return "bgc-danger";
          }
        }
      }
    },
    submitFn(upDown) {
      this.SET_QUESINDEX(0);
      // 交卷
      let score = 0;
      let mistakesArr = JSON.parse(localStorage.getItem("appMistakes") || "[]");
      this.questionsData.forEach(v => {
        if (JSON.stringify(v.ans) != v.answers) {
          if (mistakesArr.indexOf(v) == -1) {
            mistakesArr.push(v);
          }
        } else {
          if (mistakesArr.indexOf(v) != -1) {
            mistakesArr.splice(mistakesArr.indexOf(v), 1);
          }
          score++;
        }
      });
      localStorage.setItem("appMistakes", JSON.stringify(mistakesArr));
      this.SET_RIGHT(score);
      this.alertZzcFn();
    },
    // 弹出框+返回
    alertZzcFn() {
      this.isAlertZzc = true;
      setTimeout(() => {
        this.isAlertZzc = false;
        this.jumpExamIndex();
      }, 2000);
    }
  },
  computed: {
    ...mapState("exam", [
      "exmpntOrTitle",
      "questionsData",
      "questionIndex",
      "rightAns"
    ]),
    ...mapGetters("exam", ["questionItem", "questionOptions"])
  },
  filters: {
    fillZero(num) {
      return num < 10 ? "0" + num : num;
    }
  }
};
</script>

<style scoped src="@/css/exam/examPublic.css"></style>
<style scoped src="@/css/exam/examPoint.css"></style>
<style scoped src="@/css/exam/icon/iconfont.css"></style>
